import React, { useMemo } from "react";
import { useApp} from "./Provider";

type IScreenMediaProps = {
    [P in AppView.IDeviceType]?: React.ComponentType<any>;
} & { children?: any };

export const ScreenMedia = <T={}>(props: IScreenMediaProps & T) => {
    const app = useApp();
    const ScreenSupportComponent = useMemo(() => {
        switch(app.deviceType) {
            case "Mobile": {
                return props.Mobile
            }
            case "iPad": {
                return props.iPad || props.Desktop;
            }
            case "Desktop": {
                return props.Desktop;
            }
            default: {
                return props.Desktop;
            }
        }
    }, [app.deviceType]);
    return (<>
        { ScreenSupportComponent && <ScreenSupportComponent {...props}>{props.children}</ScreenSupportComponent> }
        { !ScreenSupportComponent && <>{props.children} </> }
    </>);
};